<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>themes</title>
    <script src="../../dist/nonmin/jsoneditor.js"></script>
    <link rel='stylesheet' id='theme_stylesheet'>
    <link rel='stylesheet' id='iconlib_stylesheet'>
  </head>
  <body>
  <div>
    <label>theme</label>
    <select id='theme_switcher' name="theme" class='form-control browser-default'>
      <option value=''></option>
      <option value='barebones'>Barebones</option>
      <option value='bootstrap2'>Bootstrap 2</option>
      <option value='bootstrap3'>Bootstrap 3</option>
      <option value='bootstrap4'>Bootstrap 4</option>
      <option value='foundation3'>Foundation 3</option>
      <option value='foundation4'>Foundation 4</option>
      <option value='foundation5'>Foundation 5</option>
      <option value='foundation6'>Foundation 6</option>
      <option value='html'>HTML</option>
      <option value='jqueryui'>jQuery UI</option>
      <option value='materialize'>Materialize</option>
      <option value='spectre'>Spectre</option>
    </select>
  </div>
  <div>
    <label>iconlib</label>
    <select id='iconlib_switcher' name="iconlib" class='form-control browser-default'>
      <option value=''></option>
      <option value='bootstrap2'>Bootstrap 2</option>
      <option value='bootstrap3'>Bootstrap 3</option>
      <option value='fontawesome3'>fontawesome 3</option>
      <option value='fontawesome4'>fontawesome 4</option>
      <option value='fontawesome5'>fontawesome 5</option>
      <option value='foundation3'>Foundation 3</option>
      <option value='jqueryui'>jQuery UI</option>
      <option value='materialicons'>Material icons</option>
      <option value='spectre'>Spectre</option>
    </select>
  </div>
    <div class="container">
      <div id="json-editor-form"></div>
    </div>
  <script>
    const schema = {
      "type": "object",
      "title": "Themes Test Page",
      "properties": {
        "caseinfo": {
          "type": "info",
          "title": "Layout test cases",
          "description": "This test case was made to help create or update themes for JSON-Editor 2.x version. It shows the available standard elements with all displayable options enabled, such as description and infoText. The buttons/select at the top of the form shows how to toggle various theme specific options.<br><br>Note: If you use this with the 1.x version, some of the fields might not be displayed correctly."
        },
        "standardcase1": {
          "type": "object",
          "$ref": "#/definitions/standardcase1"
        },
        "standardcase2": {
          "type": "object",
          "$ref": "#/definitions/standardcase2"
        },
        "arraycase": {
          "type": "object",
          "$ref": "#/definitions/arraycase"
        },
        "arraycasetabs": {
          "type": "object",
          "$ref": "#/definitions/arraycasetabs"
        },
        "arraycasetabstop": {
          "type": "object",
          "$ref": "#/definitions/arraycasetabstop"
        },
        "arraycasetable": {
          "type": "object",
          "$ref": "#/definitions/arraycasetable"
        },
        "objectcase": {
          "type": "object",
          "$ref": "#/definitions/objectcase"
        },
        "objectcasegrid": {
          "type": "object",
          "$ref": "#/definitions/objectcasegrid"
        },
        "objectcasegridstrict": {
          "type": "object",
          "$ref": "#/definitions/objectcasegridstrict"
        },
        "objectcasecategories": {
          "type": "object",
          "$ref": "#/definitions/objectcasecategories"
        }
      },
      "definitions": {
        "standardcase1": {
          "title": "Input fields with description and infoText enabled.",
          "properties": {
            "stringinput": {
              "type": "string",
              "title": "String input field with description and infoText",
              "description": "String input field with description and infoText.",
              "options": {
                "infoText": "This field is generated by src/editors/string.js",
                "grid_columns": 6,
                "inputAttributes": {
                  "placeholder": "enter a text"
                }
              }
            },
            "numberinput": {
              "type": "number",
              "title": "Number input field with description and infoText",
              "description": "Number input field with description and infoText.",
              "options": {
                "infoText": "This field is generated by src/editors/number.js",
                "grid_columns": 6,
                "inputAttributes": {
                  "placeholder": "enter a number"
                }
              }
            },
            "integerinput": {
              "type": "integer",
              "title": "Integer input field with description and infoText",
              "description": "Text input field with description and infoText.",
              "options": {
                "infoText": "This field is generated by src/editors/integer.js",
                "grid_columns": 6,
                "inputAttributes": {
                  "placeholder": "enter a integer number"
                }
              }
            },
            "rangeinput": {
              "type": "integer",
              "format": "range",
              "title": "Range input field with description and infoText (Integer)",
              "description": "Range input field with description and infoText. (Integer)",
              "options": {
                "infoText": "This field is generated by src/editors/integer.js",
                "grid_columns": 6
              }
            },
            "textareainput": {
              "type": "string",
              "format": "textarea",
              "title": "Textarea input field with description and infoText",
              "description": "Textarea input field with description and infoText.",
              "options": {
                "infoText": "This field is generated by src/editors/string.js",
                "grid_columns": 12,
                "inputAttributes": {
                  "placeholder": "enter a text"
                }
              }
            },
            "booleancheckbox": {
              "type": "boolean",
              "format": "checkbox",
              "title": "Boolean checkbox input field with description and infoText",
              "description": "Boolean checkbox input field with description and infoText.",
              "default": true,
              "options": {
                "infoText": "This field is generated by src/editors/checkbox.js",
                "grid_columns": 6
              }
            },
            "select": {
              "type": "string",
              "title": "Select input field with description and infoText",
              "description": "Select input field with description and infoText.",
              "enum": [
                "1",
                "2",
                "3"
              ],
              "options": {
                "enum_titles": [
                  "First",
                  "Second",
                  "Third"
                ],
                "infoText": "This field is generated by src/editors/select.js",
                "grid_columns": 6
              }
            },
            "radio": {
              "type": "string",
              "format": "radio",
              "title": "Radio input field with description and infoText",
              "description": "Radio input field with description and infoText",
              "enum": [
                "Red",
                "Green",
                "Blue"
              ],
              "options": {
                "infoText": "This field is generated by src/editors/radio.js",
                "grid_columns": 6
              }
            },
            "multiselect": {
              "type": "array",
              "format": "select",
              "uniqueItems": true,
              "title": "Multiselect input field with description and infoText - format: select",
              "description": "Multiselect input field with description and infoText. - format: select",
              "items": {
                "type": "string",
                "enum": [
                  "bold",
                  "italic",
                  "smallcaps"
                ]
              },
              "options": {
                "infoText": "This field is generated by src/editors/multiselect.js",
                "grid_columns": 6
              }
            },
            "multiselectcheckbox": {
              "type": "array",
              "format": "checkbox",
              "uniqueItems": true,
              "title": "Multiselect input field with description and infoText - format: checkbox",
              "description": "Multiselect input field with description and infoText. - format: checkbox",
              "items": {
                "type": "string",
                "enum": [
                  "bold",
                  "italic",
                  "smallcaps"
                ]
              },
              "options": {
                "infoText": "This field is generated by src/editors/multiselect.js",
                "grid_columns": 6
              }
            },
            "button": {
              "type": "button",
              "title": "Button",
              "description": "Button with description and infoText.",
              "options": {
                "infoText": "This field is generated by src/editors/button.js",
                "grid_columns": 6,
                "align": 'right'
              }
            }
          }
        },
        "standardcase2": {
          "$ref": "#/definitions/standardcase1",
          "title": "Input fields with description, infoText and compact enabled.",
          "properties": {
            "stringinput": {
              "options": {
                "compact": true
              }
            },
            "numberinput": {
              "options": {
                "compact": true
              }
            },
            "integerinput": {
              "options": {
                "compact": true
              }
            },
            "rangeinput": {
              "options": {
                "compact": true
              }
            },
            "textareainput": {
              "options": {
                "compact": true
              }
            },
            "booleancheckbox": {
              "options": {
                "compact": true
              }
            },
            "select": {
              "options": {
                "compact": true
              }
            },
            "radio": {
              "options": {
                "compact": true
              }
            },
            "multiselect": {
              "options": {
                "compact": true
              }
            },
            "multiselectcheckbox": {
              "options": {
                "compact": true
              }
            },
            "button": {
              "options": {
                "compact": true
              }
            }
          }
        },
        "arraycase": {
          "title": "Array",
          "properties": {
            "arraytest": {
              "type": "array",
              "title": "Colors",
              "default": [
                "Red",
                "Green",
                "Blue"
              ],
              "items": {
                "type": "string"
              }
            }
          }
        },
        "arraycasetabs": {
          "title": "Array with format: tabs",
          "$ref": "#/definitions/arraycase",
          "properties": {
            "arraytest": {
              "format": "tabs"
            }
          }
        },
        "arraycasetabstop": {
          "title": "Array with format: tabs-top",
          "$ref": "#/definitions/arraycase",
          "properties": {
            "arraytest": {
              "format": "tabs-top"
            }
          }
        },
        "arraycasetable": {
          "title": "Array with format: table",
          "$ref": "#/definitions/arraycase",
          "properties": {
            "arraytest": {
              "format": "table"
            }
          }
        },
        "objectcase": {
          "title": "Object",
          "properties": {
            "objecttest": {
              "type": "object",
              "title": "Object props",
              "properties": {
                "test1": {
                  "type": "string"
                },
                "test2": {
                  "type": "number"
                },
                "test3": {
                  "type": "integer"
                }
              }
            }
          }
        },
        "objectcasegrid": {
          "$ref": "#/definitions/objectcase",
          "title": "Object w. format: grid",
          "properties": {
            "objecttest": {
              "format": "grid"
            }
          }
        },
        "objectcasegridstrict": {
          "title": "Object w. format: grid-strict",
          "$ref": "#/definitions/objectcase",
          "properties": {
            "objecttest": {
              "format": "grid-strict"
            }
          }
        },
        "objectcasecategories": {
          "title": "Object w. format: categories",
          "properties": {
            "objecttest": {
              "type": "object",
              "format": "categories",
              "options": {
                "disable_collapse": true,
                "disable_edit_json": true,
                "disable_properties": true,
                "compact": true
              },
              "properties": {
                "cat1": {
                  "type": "object",
                  "title": "Category 1",
                  "options": {
                    "disable_collapse": true,
                    "disable_edit_json": true,
                    "disable_properties": true,
                    "compact": true
                  },
                  "properties": {
                    "string": {
                      "type": "string"
                    }
                  }
                },
                "cat2": {
                  "type": "object",
                  "title": "Category 2",
                  "options": {
                    "disable_collapse": true,
                    "disable_edit_json": true,
                    "disable_properties": true
                  },
                  "properties": {
                    "number": {
                      "type": "number"
                    }
                  }
                },
                "cat3": {
                  "type": "object",
                  "title": "Category 3",
                  "properties": {
                    "integer": {
                      "type": "integer"
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    let jsoneditor = null
    let theme = null
    let iconlib = null

    const initJsoneditor = (theme, iconlib) => {

      if (jsoneditor) {
        console.log('...destroy jsoneditor')
        jsoneditor.destroy();
      }

      console.log('...init jsoneditor', theme, iconlib)

      jsoneditor = new window.JSONEditor(document.querySelector("#json-editor-form"), {
        schema: schema,
        remove_button_labels: true,
        theme: theme,
        iconlib: iconlib,
      });
    }

    document.getElementById('theme_switcher').addEventListener('change', function() {
      theme = this.value || '';
      var mapping = {
        barebones: '',
        html: '',
        bootstrap2: 'https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css',
        bootstrap3: 'https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css',
        bootstrap4: 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
        foundation3: 'https://cdnjs.cloudflare.com/ajax/libs/foundation/3.2.5/stylesheets/foundation.css',
        foundation4: 'https://cdnjs.cloudflare.com/ajax/libs/foundation/4.3.2/css/foundation.min.css',
        foundation5: 'https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.min.css',
        foundation6: 'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.4/foundation.min.css',
        jqueryui: 'https://code.jquery.com/ui/1.10.3/themes/south-street/jquery-ui.css',
        materialize: 'https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css',
        spectre: 'https://unpkg.com/spectre.css/dist/spectre.min.css'
      };
      const link = document.querySelector('#theme_stylesheet').href = mapping[theme];
      console.log(link)
      initJsoneditor(theme, iconlib)
    });

    document.getElementById('iconlib_switcher').addEventListener('change',function() {
      iconlib = this.value || '';
      var mapping = {
        bootstrap2: 'https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css',
        bootstrap3: 'https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css',
        fontawesome3: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.css',
        fontawesome4: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css',
        fontawesome5: 'https://use.fontawesome.com/releases/v5.6.1/css/all.css',
        foundation3: 'https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css',
        jqueryui: 'https://code.jquery.com/ui/1.10.3/themes/south-street/jquery-ui.css',
        materialicons: 'https://fonts.googleapis.com/icon?family=Material+Icons',
        spectre: 'https://unpkg.com/spectre.css/dist/spectre-icons.min.css'
      };

      document.querySelector('#iconlib_stylesheet').href = mapping[iconlib];
      initJsoneditor(theme, iconlib)
    });


    initJsoneditor()

  </script>
  </body>
</html>
